let form = layui.form;
// 获取地址栏的id
let id = new URLSearchParams(location.search).get('id');
// console.log(id);



// -------------------------- 获取分类，渲染到下拉框的位置 --------
$.ajax({
  url: '/my/category/list',
  success: function (res) {
    let arr = [];
    res.data.forEach(item => {
        arr.push(`<option value="${item.id}">${item.name}</option>`);
    });
    $('select[name=cate_id]').append(arr.join(''));
        // form.render('select', 'lay-filter属性值');
        form.render('select');
    // 下拉框的分类渲染完成，然后再去发送ajax请求，获取文章详情
    

  }
});



// --------------使用富文本编辑器-----------
initEditor('.textt');



$.ajax({

  url: `/my/article/${id}`,

  success: function (res) {

    if (res.status == 0) {
      console.log(id, 'ww', res);
      layer.msg(res.message);
      image.cropper('replace', `http://www.itcbc.com:8080/${res.data.cover_img}`)
      $('.w input[name=title]').val(res.data.title);
      $('.w input[name=cate_id]').val(res.data.cate_id);
      $('.textt').text(res.data.content)
      // tinyMCE.activeEditor.setContent(res.data.content);
      if (res.data.state == '已发布') {

      } else {

      };






    }
  }
})



// ------------------------------封面图片处理------------------
// ----实现基本的剪裁框------
// 1. 初始化图片裁剪器
let image = $('#image');

// 2. 裁剪选项
let option = {
  aspectRatio: 400 / 280,
  preview: '.img-preview'
};

// 3. 初始化裁剪区域
image.cropper(option);


// ----------------------------- 点击 上传 能够触发文件域的单击事件 ------------------
// button:contains("标签的内容")  ---- 查找包含“内容”的标签
$('button:contains("选择封面")').on('click', function () {
  $('#file').trigger('click');
})

// ----------------------------- 更换剪裁区的图片 -----------------------------------
$('#file').on('change', function () {
  // console.dir(this);
  if (this.files.length > 0) {
    let fileObj = this.files[0];
    let url = URL.createObjectURL(fileObj);
    image.cropper('replace', url);
  }
});






// ----------------确认修改功能---------------
$('form').on('submit', function (e) {
  e.preventDefault();
  let data = new FormData(this);  // 收集到的数据只有 title cate_id  state
  // 单独处理 content
  data.set('content', tinyMCE.activeEditor.getContent());

// 剪裁图片，把剪裁后的结果加到fd中
  let canvas = image.cropper('getCroppedCanvas', { width: 400, height: 280 });
  // 通过 toBlob 方法可以把canvas转成 Blob 对象的格式
  canvas.toBlob(function (blob) {
    // 参数blob就是转换后的结果，我们把这个结果加到fd中
    data.append('cover_img', blob);

    data.append('id', id);

    $.ajax({
      url: '/my/article/update',
      type: 'POST',
      data: data,
      processData: false,
      contentType: false,
      success: function (res) {
        // console.log(res);
        layer.msg(res.message);
        if (res.status === 0) {
          location.href = './list.html';
        }
      }
    });
  });
})
